<!-- 视图周界线 -->

<template>
  <div v-show="!hide" :class="lineClass">
    <svg>
      <line v-bind="lineProps" />
      <line
        v-bind="lineProps"
        :stroke-width="lineProps['stroke-width'] * 1.4"
        @mouseenter="mouseEnter"
        @mouseleave="mouseLeave"
        @click.stop="toEdit"
      />
    </svg>

    <div class="Secure-MapView-line-panel" :style="textStyle" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
      <div>{{ obj.deviceName }}</div>
      <div>{{ obj.areaName }}</div>
      <div v-if="obj.ipAddress">{{ obj.ipAddress }}</div>
      <span @click.stop="toDel">删除</span>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import ViewLine from '@admin/views/Secure/mixMap/MapView/ViewLine'

// ============================== 导出组件 ============================== //

export default CORE.extend(ViewLine, {
  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    ...ViewLine.computed,
  },
})
</script>
